import React, { FC } from 'react';
import { connect } from 'react-redux';
import {
  NavBar,
  Icon,
  TextareaItem,
  Button,
  WingBlank,
  WhiteSpace,
  Modal
} from 'antd-mobile-v2';
import styles from './index.module.less';
import { createForm } from '@/components/rc-form';
import { Actions } from '../../constants';
import { IApprovalActionReq, IParamsForm } from '@/services/approval';
import { SUCCESS_CODE } from '@/services/constant';
import { ConnectProps } from 'typings/connect';
import FormRender from '@/plugins/form/form-render';
import H5Components from '@/plugins/form/form-components';
import { IGaeaAll } from '@/plugins/form/types';

export interface IActionModal extends ConnectProps {
  // title: string;
  textTitle?: string;
  procName?: string;
  confirmText: string;
  placeholder?: string;
  actions: Actions;
  taskId: string;
  onCancel: (needRefresh?: boolean) => void;
  loading?: boolean;
  formInfo?: IParamsForm;
  onRefresh?: () => void;
  onRefreshStatus?: () => void;
  form?: any;
  formParsed?: IGaeaAll;
  formValues?: IterateAny;
}
// 审批业务-同意/拒绝
const ActionModal: FC<IActionModal> = (props) => {
  // console.log('agree props:', props);

  const handleOk = async () => {
    const result = await props.form.getFieldsValue();
    console.log('result :', result);
    await props.form.validateFields();

    const params: IApprovalActionReq = {
      forms: props.formInfo,
      action: props.actions,
      handlerComment: result.handlerComment, // 处理意见
      taskRecordId: props.taskId
    };
    if (props.dispatch) {
      props
        .dispatch({
          type: 'capproval/doTask',
          payload: params
        })
        .then((res?: any) => {
          if (res && res.status == SUCCESS_CODE) {
            // message.success(res.message);
            props.onCancel(true);
            if (props.dispatch) {
              // 更新-待我审批-小红点数量
              props.dispatch({
                type: 'capproval/getMyTaskCount'
              });
              // 更新-待我审批-列表 TODO
              props.onRefreshStatus && props.onRefreshStatus();
            }
          }
        });
    }
  };
  const handleCancel = () => {
    props.onCancel && props.onCancel();
  };
  const errors = props.form.getFieldError('handlerComment');
  return (
    // <div className={styles.applyProcess}>
    <Modal visible transparent className={styles.applyProcess}>
      <NavBar
        mode="light"
        icon={<Icon type="left" size="lg" />}
        onLeftClick={handleCancel}
        rightContent={[
          <Icon key="1" type="cross" size="lg" onClick={handleCancel} />
        ]}
      >
        {props.procName}
      </NavBar>
      <div className={styles.formWrap}>
        {props.formParsed ? (
          <FormRender
            renderMode="detail"
            form={props.form}
            key={props.taskId}
            componentClasses={H5Components}
            value={props.formParsed}
            formValues={props.formValues}
          />
        ) : null}
      </div>
      <TextareaItem
        title={props.textTitle}
        placeholder={props.placeholder}
        autoHeight
        rows={3}
        {...props}
        {...props.form.getFieldProps('handlerComment', {
          rules: [
            {
              required: props.actions === Actions.Reject ? true : false,
              message: `请输入${props.textTitle}`
            }
          ]
        })}
      />
      {props.form.getFieldError('handlerComment') ? (
        <span className={styles.errorMsg}>
          {errors
            ? errors.join(',')
            : null}
        </span>
      ) : null}
      <WhiteSpace size="lg" />
      <WingBlank size="lg">
        <Button type="primary" onClick={handleOk}>
          {props.confirmText}
        </Button>
      </WingBlank>
    </Modal>
    // </div>
  );
};
const ActionModalWrapper = createForm()(ActionModal);
export default connect(() => {
  // return {
  //   loading: loading.effects['capproval/doTask'],
  // };
})(ActionModalWrapper);
